<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'Doctor Register' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding-top: 0;">
    <div class="patientBg">
      <ion-label class="registerWords">{{ 'Doctor' | translate }}</ion-label>
    </div>

    <div class="inputBoxOne">
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconemail.png" alt="" class="iconStyle" style="margin-top: 2vh">
            <ion-input placeholder="{{ 'Email' | translate }}" clearInput class="inputStyle" [(ngModel)]="emailNum" type="email"></ion-input>
        </div>

        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
          <img src="./../../../../assets/img/iconmessage.png" alt="" class="iconStyle">
          <ion-input placeholder="{{ 'EmailCode' | translate }}" clearInput class="inputStyle" style="width:calc(100% - 34vw)" [(ngModel)]="emailCode"></ion-input>
          <ion-button style="width:calc(100% - 52vw);color: white;font-size: 12px;" size="small" color="care" (click)="getCode()" [disabled]="!verifyCode.disable">
            <!-- {{ 'GetCode' | translate}} -->
            {{verifyCode.verifyCodeTips | translate}}
          </ion-button>
      </div>

        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="password"></ion-input>
        </div>
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Confirm Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="confirm"></ion-input>
        </div>

        <div class="inputBox" style="width: 75vw">
            <img src="./../../../../assets/img/iconphone.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Phone' | translate }}" clearInput class="inputStyle" [(ngModel)]="phoneNum"></ion-input>
        </div>

        <div class="inputBox" style="width: 75vw" (click)="selectRegion()">
            <img src="./../../../../assets/img/iconaddress.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Region' | translate }}" readonly class="inputStyle" style="width: calc(100% - 15vw);" [(ngModel)]="aRegion"></ion-input>
            <img src="./../../../../assets/img/icondown.png" alt="" class="iconStyle" style="margin-right: 0;margin-top:2vh">
        </div>

        <div class="inputBox" style="width: 75vw" (click)="openPicker(1,defaultColumnOptions[0].length,defaultColumnOptions)">
            <img src="./../../../../assets/img/iconadoffice.png" alt="" class="iconStyle" style="margin-top: 13px;">
            <ion-input placeholder="{{ 'Department' | translate }}" readonly class="inputStyle" style="width: calc(100% - 15vw);" [(ngModel)]="aDepartment"></ion-input>
            <img src="./../../../../assets/img/icondown.png" alt="" class="iconStyle" style="margin-right: 0;margin-top:2vh">
        </div>

        <ion-button shape="round" expand="block" class="defaultButton" color="care" style="margin-top: 40px;width: 75vw" (click)="registerIme()">{{ 'Register' | translate }}</ion-button>
        <div class="privacyPolicy">
          <span *ngIf="sysLang == 'zh-cn'">
           登录/注册即同意<span (click)="toPrivacy()" style="text-decoration: underline;color: #009e41;">信挂号App《用户使用与隐私协议</span>
          </span>
          <span *ngIf="sysLang == 'en-us'">
           Sign in/Sign up means that the user fully accept <span (click)="toPrivacy()" style="text-decoration: underline;color: #009e41;">Privacy Policy of EasyDoc App</span>
          </span>
         </div>
        <div class="hasAccount">
          <ion-label style="float: right; color: #009e41" (click)="goBack()">{{ 'Login Now' | translate }}</ion-label>
          <ion-label style="float:right; color: gray">{{ 'Have account' | translate }}？</ion-label>
        </div>
    </div>

    <div class="successMoadl" *ngIf="isShow == true">
      <div class="coverDiv">
        <img src="./../../../../assets/img/iconbook.png" style="width: 95px;height:auto;">
        <div class="successWords">
          <p>{{ 'welcome' | translate }}</p>
          <p>{{ 'welcomeone' | translate }}</p>
          <!-- <p>{{ 'welcometwo' | translate }}</p> -->
          <!-- <p>
            <a href="www.baidu.com">www.baidu.com</a>
          </p>
          <p>{{ 'welcomethree' | translate }}</p>
          <p>{{ 'welcomefour' | translate }}</p> -->

        </div>
      </div>
      <img src="./../../../../assets//img/iconclose.png" alt="" style="width: 30px;height:auto;margin-top:15px" (click)="toDoctorLogin()">
    </div>
  </div>

</ion-content>
